@import '../public/less/variables.less';
body {
    background-color: @base_bg;
}

#app {
    .main {
        margin-top: 20*@base_size;
        min-height: 600*@base_size;
        //个人信息
        .my_info {
            width: 385*@base_size;
            background-color: white;
            font-size: 16*@base_size;
            font-weight: bold;
            position: fixed;
            top: 120*@base_size;
            >div:nth-of-type(1) {
                height: 200*@base_size;
                padding: 10*@base_size 20*@base_size ;
                >div:nth-of-type(1) {
                    width: 100*@base_size;
                    height: 100*@base_size;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                >li {
                    padding: 6px 15px;
                }                
                .unactive {
                    background-color: @base_bg;
                    color: gray;
                }
                .active {
                    background-color: @base_color;
                    color: white;
                }
            }
            >div:nth-of-type(2) {
                >li {
                    height: 60*@base_size;
                    width: 50%;
                    float: left;
                    border-bottom: 1px solid @base_bg;
                    border-right: 1px solid @base_bg;
                    color: #666666;
                }
                >li:nth-of-type(1),>li:nth-of-type(2){
                    border-top: 1px solid @base_bg;                    
                }
                >li:nth-of-type(2n){
                    border-right: none;                    
                }
                .active {
                    color: @base_color;
                }
            }
        }
        //右侧
        .right {
            padding-left: 400*@base_size;
            .one_type {
                background-color: white;
                min-height: 700px;
                //名称 (我的收藏、站内信。。。。) 统一样式
                .type_title {
                    height: 60*@base_size;
                    line-height: 60*@base_size;
                    letter-spacing: 2px;
                    font-size: 16*@base_size;
                    font-weight: bold;
                    border-bottom: 1px solid @base_bg;
                    padding-left: 25*@base_size;
                    background-color: white;
                }
                //tab页统一样式
                .my_tabs {
                    margin-top: 10px;
                    margin-bottom: 20px;
                    margin-left: 15*@base_size;
                    li {
                        width: 114*@base_size;
                        height: 50*@base_size;
                        line-height: 50*@base_size;
                        font-size: 18*@base_size;                        
                        float: left;
                        border: 1px solid @color_line;
                        border-left: none;
                    }
                    li:first-child {
                        border-radius: 10px 0 0 10px;
                        border-left: 1px solid @color_line;
                    }
                    li:last-child {
                        border-radius: 0 10px 10px 0;
                    }
                    .active {
                        background-color: @base_color;
                        border-bottom: 1px solid @base_color;
                        color: white;
                    }
                }
                .two_col {
                    display: inline-block;
                    width: 100%;
                    position: relative;
                    line-height: 20*@base_size;
                    max-height: 20*2*@base_size;
                    overflow: hidden;
                }
                .two_col::after {
                    content: "....";
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    display: inline-block;
                    min-width: 10px;
                    background-color: white;
                }
                .two_col.active {
                    max-height: 100*@base_size;
                }
                .two_col.active::after {
                    content: '';
                }
            }
            //我的金币
            .coin{
                position: relative;
                .content{
                    >div{
                        padding: 10*@base_size;
                        text-align: center;
                    }
                    .logo{
                        text-align: center;
                        padding: 15*@base_size;
                        img{
                            width: 128*@base_size;
                        }
                    }
                    >div:nth-of-type(2){
                        letter-spacing: 2px;
                        li:nth-of-type(1){
                            font-size: 16*@base_size;
                        }
                        li:nth-of-type(2){
                            font-size: 24*@base_size;
                            color: @base_color;
                        }
                    }
                    >div:nth-of-type(3){
                        button{
                            width: auto;
                            margin: 15*@base_size auto;
                            display: block;
                            letter-spacing: 3px;
                            padding: 8*@base_size 50*@base_size;
                        }
                        button:nth-of-type(2){
                            background-color: desaturate(@base_color, 20%);
                        }
                    }
                }
                //充值列表
                .lists{
                    >div.one_list{
                        width: 33.3%;
                        float: left;
                        text-align: center;
                        padding: 15*@base_size;
                        >div{
                            height:100*@base_size;
                            padding: 7*@base_size 0;
                            width: 100%; 
                            background-color: @base_color;
                            border-radius: 10px;
                            >div:nth-of-type(1){
                                color: white;
                            }
                            >div:nth-of-type(2){
                                color: white;
                            }
                        }
                        >div.active{
                            background-color: desaturate(@base_color, 70%);
                            >div{                                
                                color: white !important;
                            }
                        }
                    }
                    //充值
                    .recharge{
                        text-align: center;
                        padding: 10*@base_size;
                        font-size: 20px;
                        padding: 10px;
                        button{
                            padding: 8*@base_size 50*@base_size;
                            letter-spacing: 3px;
                        }
                        
                    }
                }
                //版权
                .copy{
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 30*@base_size;
                    >div:nth-of-type(1){
                        font-size: 18*@base_size;   
                        line-height: 35*@base_size;                    
                    }
                    >div:nth-of-type(2){
                        font-size: 16*@base_size;
                         line-height: 35*@base_size; 
                    }
                }
                //交易记录
                .trade_log{
                    >div:nth-of-type(1){
                        padding: 10px;
                        font-size: 20*@base_size;
                        border-bottom: 1px solid @color_line;
                        position: relative;
                        button{
                            position: absolute;
                            top: 50%;;
                            transform: translateY(-50%);
                            right: 30px;
                        }
                    }
                    
                    .one_list{
                        padding: 5px 10% 5px 50px;
                        border-bottom: 1px solid @color_line;
                        >div:nth-of-type(1){                            
                            color: @base_color;
                            padding: 5px 0;
                            font-size: 16*@base_size;
                        }
                        >div:nth-of-type(2){
                            span{
                                flex: 1;
                            }
                        }
                    }
                }   
            }
            //修改密码
            .password {
                padding-bottom: 150px;
                //表单
                form {
                    background-color: white;
                    padding: 20px 0 45px 0;
                }
            }
            //收藏
            .collection {
                padding-bottom: 150px;
                //名称
                .type_title {
                    height: 60*@base_size;
                    line-height: 60*@base_size;
                    letter-spacing: 2px;
                    font-size: 16*@base_size;
                    font-weight: bold;
                    border-bottom: 1px solid @base_bg;
                    padding-left: 25*@base_size;
                    background-color: white;
                }
                .content {
                    padding-top: 10px;
                    //帖子
                    .post_list {
                        //名称
                        .type_title {
                            height: 60*@base_size;
                            line-height: 60*@base_size;
                            letter-spacing: 2px;
                            font-size: 16*@base_size;
                            font-weight: bold;
                            border-bottom: 1px solid @base_bg;
                            padding-left: 25*@base_size;
                            background-color: white;
                        }
                        //论坛列表
                        .community_news {
                            //上半部分
                            .content {
                                background-color: white;
                                padding: 22*@base_size 22*@base_size 0 22*@base_size;
                                margin-bottom: 20px;
                                border-top: 1px solid @color_line;
                                border-bottom: 1px solid @color_line;
                                >div:nth-of-type(1) {
                                    height: 50*@base_size;
                                    >img {
                                        width: 50*@base_size;
                                        height: 100%;
                                        float: left;
                                    }
                                    >div {
                                        margin-left: 20*@base_size;
                                        float: left;
                                        height: 100%;
                                        padding-top: 5px;
                                        align-items: flex-start;
                                        >span:nth-of-type(1) {
                                            font-size: 16px;
                                            font-weight: bold;
                                        }
                                    }
                                }
                                >div:nth-of-type(2) {
                                    margin-left: 70*@base_size;
                                    padding: 10px 0;
                                }
                                >div:nth-of-type(3) {
                                    margin-left: 70*@base_size;
                                    padding-bottom: 20*@base_size;
                                    max-width: 600*@base_size;
                                    overflow: hidden;
                                    >div {
                                        float: left;
                                        width: 175*@base_size;
                                        height: 175*@base_size;
                                        margin-right: 5px;
                                        margin-bottom: 5px;
                                        background-color: lightgray;
                                    }
                                }
                            }
                            //下半部分
                            .icons {
                                padding: 20*@base_size 0;
                                overflow: hidden;
                                border-top: 1px solid lighten(@color_line,10%);
                                margin: 0 -22*@base_size;
                                >li {
                                    flex:1;
                                    height: 100%;
                                    border-right: 1px solid black;
                                    img {
                                        margin-right: 5px;
                                    }
                                }
                                >li:nth-last-of-type(1) {
                                    border: none;
                                }
                            }
                        }
                        //新闻列表
                        .news_lists{                            
                            .content{
                                >div:nth-of-type(1) {
                                    height: 50*@base_size;
                                    >img {
                                        width: 100*@base_size;
                                        height: 100%;
                                        float: left;
                                    }
                                    >div {
                                        padding-top: 0;
                                    }
                                }
                                >div:nth-of-type(2){  
                                    margin-left: 120*@base_size;                              
                                    img{
                                        display: none;
                                    }
                                }
                              .no_headimg{
                                  margin-left: 0 !important;
                              }
                            }
                        }
                    }
                }
            }
            //站内信
            .letters {
                position: relative;
                //通用样式
                .content {
                    >div {
                        padding-left: 25*@base_size;
                    }
                }
                .one_news {
                    min-height: 90*@base_size;
                    padding: 20*@base_size 25*@base_size 20*@base_size 0;
                    align-items: flex-start;
                    border-bottom: 1px solid @color_line;
                    >div {
                        width: 100%;
                    }
                }
                .one_news:first-child {
                    border-top: 1px solid @color_line;
                }
                .time {
                    color: @base_color_2;
                }
                .money {
                    color: @base_color;
                }
                //结束
                //系统通知
                .notice {
                    .one_news {
                        >div:nth-of-type(1) {
                            min-height: 35*@base_size;
                            align-items: flex-start;
                            span:nth-of-type(1) {
                                font-weight: bold;
                                font-size: 16px;
                            }
                            span:nth-of-type(2) {
                                color: @base_color_2;
                            }
                        }
                    }
                    .one_news:first-child {
                        border-top: 1px solid @color_line;
                    }
                }
                //对账单
                .statement {
                    .one_news {
                        >div:nth-of-type(1),
                        >div:nth-of-type(2) {
                            min-height: 35*@base_size;
                            align-items: flex-start;
                            span:nth-of-type(1) {
                                font-weight: bold;
                                font-size: 16px;
                            }
                        }
                        >div:nth-of-type(3) {
                            padding: 5*@base_size 0;
                            >div {
                                width: 50%;
                            }
                        }
                        >div:nth-of-type(4) {
                            padding: 5*@base_size 0;
                        }
                        >div:nth-of-type(5) {
                            padding: 10*@base_size;
                            background-color: #f3f3f3;
                        }
                    }
                }
                //客服回信
                .service {
                    .one_news {
                        >div:nth-of-type(1) {
                            min-height: 35*@base_size;
                            align-items: flex-start;
                            span:nth-of-type(1) {
                                font-size: 16px;
                            }                            
                        }
                    }
                    .one_news:first-child {
                        border-top: 1px solid @color_line;
                    }
                }
                //雇佣金
                .commission {
                    .one_news {
                        >div:nth-of-type(1),
                        >div:nth-of-type(2) {
                            min-height: 35*@base_size;
                            align-items: flex-start;
                            span:nth-of-type(1) {
                                font-weight: bold;
                                font-size: 16px;
                            }
                        }
                        >div:nth-of-type(3) {
                            padding: 5*@base_size 0;
                            >div {
                                width: 50%;
                            }
                        }
                        >div:nth-of-type(4) {
                            padding: 5*@base_size 0;
                        }
                        >div:nth-of-type(5) {
                            padding: 10*@base_size;
                            background-color: #f3f3f3;
                        }
                    }
                    .one_news:first-child {
                        border-top: 1px solid @color_line;
                    }
                    .one_news.active {
                        >div:nth-of-type(2),
                        >div:nth-of-type(4),
                        >div:nth-of-type(5) {
                            display: none;
                        }
                    }
                }
                //案例追踪
                .track {
                    @track_padding_left: 35;
                    .one_news {
                        position: relative;
                        padding-left: @track_padding_left*@base_size !important;
                        >div:nth-of-type(1) {
                            position: absolute;
                            left: 0;
                            top: 22*@base_size;
                            width: @track_padding_left*@base_size;
                            font-weight: bold;
                        }
                        >div:nth-of-type(2) {
                            >div:nth-of-type(1) {
                                li {
                                    padding: 2px 10*@base_size;
                                    border-left: 1px solid @color_line;
                                    float: left;
                                    font-size: 16px;
                                }
                                li:first-child {
                                    border-left: none;
                                }
                            }
                            >div:nth-of-type(2) {
                                margin-top: 10px;
                                background-color: #f3f3f3;
                                min-height: 50*@base_size;
                                padding: 5*@base_size 10*@base_size;
                            }
                        }
                    }
                    .one_detail{
                        text-align: left;
                        padding: 0 20px;
                        border-bottom: 1px solid @color_line;
                        >div:nth-of-type(1){
                            color: @base_color;
                            font-size: 16*@base_size;
                            padding: 5px 0;
                        }
                        >div:nth-of-type(3){
                            color: @color_line;
                            padding: 5px 0;
                        }
                    }
                    .one_detail:nth-of-type(1){
                        border-top: 1px solid @color_line;
                    }
                }
                .letters_detail {
                    width: 100%;
                    min-height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: white;
                    padding-top: 70*@base_size;
                    //                  display: none;
                    .back_list {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                    }
                    .one_news {
                        padding-left: 25*@base_size;
                        padding-right: 25*@base_size;
                        >div:nth-of-type(1) {
                            min-height: 35*@base_size;
                            align-items: flex-start;
                            >span:nth-of-type(1) {
                                font-size: 16*@base_size;
                            }
                        }
                    }
                }
            }
            //头像
            .my_icon{
                .icon{
                    position: relative;
                    width: 155*@base_size;
                    height: 155*@base_size;
                    overflow: hidden;
                    margin: 40px auto;
                    border-radius: 50%;
                }
                .icon + div{
                    padding: 30px 0;
                    button{
                        width: 155*@base_size;
                    }
                }
            }
            //签约
            .signed{
                .content{
                    .sign_type{
                        padding: 30px 0;
                        text-align: center;
                        img{
                            width: 120px;
                        }
                        p{
                            font-size: 25*@base_size;
                            padding: 25px 0;
                            color: @base_color;
                        }
                    }
                    .sign_type:nth-of-type(1){
                        border-bottom: 1px solid @color_line;
                    }
                    .photos{
                        >div{
                            padding:0 40*@base_size;
                        }
                        .title{
                            font-size: 20*@base_size;
                            padding: 15*@base_size 0;
                        }
                        .id_card{
                            height: 215*@base_size;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        p{
                            font-size: 16*@base_size;
                            padding: 10px 0;
                        }
                    }
                }
            }
            //成单记录
            .single_record{
                //案例追踪
                >div{
                    .one_news {
                        position: relative;     
//                      border-bottom: 1px solid @color_line; 
                        margin-top: 10px;                 
                        >div:nth-of-type(1) { 
                            padding: 10*@base_size 0; 
                            padding-left: 15*@base_size;                          
                            li {
                                padding: 2px 15*@base_size;
                                border-left: 1px solid @color_line;
                                float: left;
                                font-size: 16px;
                            }
                            li:first-child {
                                border-left: none;
                            }
                            .money{
                                color: @base_color;
                            }
                        }
                        >div:nth-of-type(2) { 
                            padding-left: 15*@base_size;     
                            border-top: 1px solid lighten(@color_line,10%);
                            border-bottom: 1px solid @color_line; 
                            background-color:lighten(@base_bg,20%) ;                    
                            li{
                                font-size: 16px;
                                padding:10*@base_size 15*@base_size;                                
                                span{
                                    float: right;
                                    margin-right: 20px;
                                }
                            }
                        }
                    }
                    
                }                
            }
            //客户管理
            .customer_list {
                .one_news{
                    >div:nth-of-type(2){
//                      border-bottom: 1px solid @color_line;
                    }
                    
                }
            }
        }
    }
    //配置推荐
    .recommend{
        width: 800*@base_size;
        min-height: 400*@base_size;
        background-color: white;
        z-index: 10000;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        padding: 20*@base_size 0;
        >button{
            position: absolute;
            right: 30*@base_size;
            top: 20*@base_size;
        }
        .lists{
            .title{
                font-size: 18px;
                color: @base_color;
                border-bottom: 1px solid @color_line;
                padding-bottom: 20*@base_size;
            }
            .list{
                .name{
                    font-size: 16px;
                    color: @base_color;
                    padding: 20*@base_size;
                }
                ul{
                    li{
                        padding: 15*@base_size 30*@base_size;
                        border-top: 1px solid @color_line;
                    }
                }
            }
        }
    }
    //成单产品
    .complete_product{
        display: none;
        .list{
            padding-left: 15*@base_size;
            .one_list{
                position: relative;
                border-bottom: 1px solid @color_line;
                >div:nth-of-type(1){
                    height: 35*@base_size;
                    line-height: 35*@base_size;
                    color: @base_color;
                }
                >div:nth-of-type(2){
                    height: 25*@base_size;
                    line-height: 25*@base_size;
                    color: @base_bg;
                }
                >div:nth-of-type(3){
                    height: 25*@base_size;
                    line-height: 25*@base_size;   
                    >span:nth-of-type(2){
                        margin-left: 10%;
                    }                                 
                }
                i{
                    position: absolute;
                    top: 50%;
                    right: 30*@base_size;
                    transform: translateY(-50%);
                }
            }
        }
    }
    label {
        color: black;
    }
    //没有数据
    .no_user{
        font-size: 20*@base_size;
        td{
            padding: 10*@base_size 0;
        }        
    }
    //现有财富坚朗
    .now_{
        display: flex;
        >div{
            flex:1;
        }
    }
}